<!-- 文字配置 -->
<template>
  <div>
    <el-form-item label="文本内容">
      <avue-input v-model="main.activeObj.data.value"></avue-input>
    </el-form-item>
    <el-form-item>
      <template slot="label">
        字体
        <span class="guide">
         <i class="el-icon-warning-outline" title="查看文档" @click="openFontGuide"></i>
        </span>
      </template>
      <avue-input v-model="main.activeOption.fontFamily"></avue-input>
    </el-form-item>
    <el-form-item label="字体大小">
      <avue-input-number v-model="main.activeOption.fontSize"
                         :max="200"></avue-input-number>
    </el-form-item>

    <el-form-item label="字体间距">
      <avue-slider v-model="main.activeOption.split"></avue-slider>
    </el-form-item>
    <el-form-item label="字体行高">
      <avue-slider v-model="main.activeOption.lineHeight"></avue-slider>
    </el-form-item>
    <el-form-item label="文字粗细">
      <avue-select v-model="main.activeOption.fontWeight"
                   :dic="dicOption.fontWeight">
      </avue-select>
    </el-form-item>
    <el-form-item label="对齐方式">
      <avue-select v-model="main.activeOption.textAlign"
                   :dic="dicOption.textAlign">
      </avue-select>
    </el-form-item>
    <el-form-item label="文字渐变">
      <avue-switch v-model="main.activeOption.gradient">
      </avue-switch>
      <template slot="label">
        文字渐变
        <span class="guide">
         <i class="el-icon-warning-outline" title="查看文档" @click="openGradientGuide"></i>
        </span>
      </template>
    </el-form-item>
    <el-form-item label="字体颜色" v-if="!main.activeOption.gradient">
      <avue-input-color v-model="main.activeOption.color"></avue-input-color>
    </el-form-item>
    <el-form-item label="字体背景" v-if="!main.activeOption.gradient">
      <avue-input-color v-model="main.activeOption.backgroundColor"></avue-input-color>
    </el-form-item>
    <el-form-item label="阴影颜色" v-if="!main.activeOption.gradient">
      <avue-input-color v-model="main.activeOption.textShadowColor"></avue-input-color>
    </el-form-item>
    <el-form-item label="阴影位置(x y z)" v-if="!main.activeOption.gradient">
      <avue-input-number v-model="main.activeOption.textShadowX"
                         :min="-20" :max="20"></avue-input-number>
      <avue-input-number v-model="main.activeOption.textShadowY"
                         :min="-20" :max="20"></avue-input-number>
      <avue-input-number v-model="main.activeOption.textShadowZ"
                         :max="50"></avue-input-number>
    </el-form-item>
    <el-form-item label="渐变方式" v-if="main.activeOption.gradient">
      <avue-select v-model="main.activeOption.gradientType"
                   :dic="gradientTypes">
      </avue-select>
    </el-form-item>
    <el-form-item title="仅需填写linear-gradient括号内的内容" label="线性渐变" v-if="main.activeOption.gradientType === 'linear' && main.activeOption.gradient">
      <avue-input v-model="main.activeOption.gradientLinear"></avue-input>
    </el-form-item>
    <el-form-item title="仅需填写radial-gradient括号内的内容" label="径向渐变" v-if="main.activeOption.gradientType === 'radial' && main.activeOption.gradient">
      <avue-input v-model="main.activeOption.gradientRadial"></avue-input>
    </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="跑马灯设置">
        <el-form-item label="开启">
          <avue-switch v-model="main.activeOption.scroll"></avue-switch>
        </el-form-item>
        <el-form-item label="反向">
          <avue-switch v-model="main.activeOption.scrollReverse"></avue-switch>
        </el-form-item>
        <template v-if="main.activeOption.scroll">
          <el-form-item label="滚动频率(ms)">
            <avue-input-number v-model="main.activeOption.speed"></avue-input-number>
          </el-form-item>
          <el-form-item label="滚动步长(px)">
            <avue-input-number v-model="main.activeOption.step" :step="0.5" :min="0.5" :max="5"></avue-input-number>
          </el-form-item>
        </template>
      </el-collapse-item>
      <el-collapse-item title="超链设置">
        <el-form-item label="开启">
          <avue-switch v-model="main.activeOption.link"></avue-switch>
        </el-form-item>
        <template v-if="main.activeOption.link">
          <el-form-item label="打开方式">
            <avue-radio v-model="main.activeOption.linkTarget"
                        :dic="dicOption.target">
            </avue-radio>
          </el-form-item>
          <el-form-item label="超链地址">
            <avue-input v-model="main.activeOption.linkHref"></avue-input>
          </el-form-item>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption } from '@/option/config'
export default {
  data () {
    return {
      dicOption: dicOption,
      gradientTypes:[{ label: '线性渐变', value: 'linear' }, { label: '径向渐变', value: 'radial' }]
    }
  },
  methods:{
    openGradientGuide(){
      window.open('https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient','_blank')
    },
    openFontGuide(){
      window.open('https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family','_blank')
    }
  },
  inject: ["main"]
}
</script>

<style scoped>
.guide{
  margin-left: 5px;
  cursor: pointer;
}
</style>
